<template>
    <div class="app-container">
        <el-table v-loading="loading" :data="declareCompanyFileListInfo">
          <el-table-column fixed label="序号" prop="" width="55" align="center">
            <template slot-scope="scope">
              <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="客户企业名称" align="left" key="companyName" prop="companyName"/>
          <el-table-column label="文件数量" align="left" key="fileNumber" prop="fileNumber" />
        
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
            <el-button
              size=""
              type="text"
              icon="el-icon-upload2"
              v-hasPermi="['taxmsg:declare:companyFileUpload']"
              @click="handleUpload(scope.row)"
            >上传凭证</el-button>
            <el-button
            size=""
            type="text"
            icon="el-icon-download"
            v-hasPermi="['taxmsg:declare:companyFileListDetail']"
            @click="handleDownload(scope.row)"
          >下载凭证</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
    <!-- 完税凭证列表对话框 -->
    <el-dialog title="完税凭证列表" :visible.sync="openCompanyFileList" width="1100px" append-to-body>
      <el-table v-loading="loading" :data="companyFileList">
        <el-table-column fixed label="序号" prop="" width="55" align="center">
          <template slot-scope="scope">
            <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="文件名" align="left" key="fileName" prop="fileName" width="200"/>
        <el-table-column label="文件后缀" align="left" key="fileSuffix" prop="fileSuffix"/>
        <el-table-column label="文件大小（kb）" align="left" key="fileSize" prop="fileSize"/>
        <el-table-column label="上传时间" align="left" key="createTime" prop="createTime"/>
        <el-table-column label="备注" align="left" key="remark" prop="remark"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-download"
            @click="handleDownloadFile(scope.row)"
          >下载凭证</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelCompanyFileList">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 上传凭证对话框 -->
    <el-dialog title="上传凭证" :visible.sync="openProof" width="400px" append-to-body>
      <el-upload
      ref="upload1"
      action=""
      :limit=limitNum
      :auto-upload="false"
      accept="*"
      :before-upload="beforeUploadFile"
      multiple
      :on-exceed="exceedFile"
      :on-success="handleSuccess"
      :file-list="fileList"
      drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <!-- <div class="el-upload__tip" slot="tip">
          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
        </div> -->
        <!-- <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div> -->
      </el-upload>
      <el-form class="mt20">
        <el-form-item prop="remark">
          <el-input type="textarea" v-model="remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm1">确 定</el-button>
        <el-button @click="cancelProof">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { declareCompanyFileList, companyFileList, declareCompanyFileUpload} from "@/api/taxmsg/declare";
export default {
  name: "companyFileList",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      declareCompanyFileListInfo: null,
      //完税凭证资料列表
      companyFileList: null,
      //是否显示弹出框（完税凭证资料列表）
      openCompanyFileList: false,
      // 是否显示弹出层（凭证）
      form: {}, 
      openProof: false,
      remark:'',
      limitNum: 5,
      fileList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        batchId: this.$route.params && this.$route.params.id
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      declareCompanyFileList(this.queryParams).then(response => {
          this.declareCompanyFileListInfo = response.data.list;
          this.total = response.data.total;
          this.loading = false;
        }
      ).catch(()=>{});
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      //this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    cancelCompanyFileList() {
      this.openCompanyFileList = false;
    },
    handleDownload(row) {
      //this.form.invoiceId= row.id;
      this.openCompanyFileList = true;
      this.loading = true;
      companyFileList(row.companyId).then(response => {
          this.companyFileList = response.data;
          this.loading = false;
        }
      );
    },
    handleDownloadFile(row) {
      this.getTaxOssAliyunSts(row.fileKey);
    },
    cancelProof() {
        this.openProof = false;
    },
    handleUpload(row) {
        this.openProof = true;
        this.form.companyId = row.companyId;
        this.form.batchId = row.batchId;
    },
    exceedFile(files, fileList) {
      this.$notify.warning({
        title: '警告',
        message: `只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`
      });
    },
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile(file) {
      //console.log(file)
      const size = file.size / 1024 / 1024
      if(size > 200) {
        this.$notify.warning({
          title: '警告',
          message: `文件大小不得超过200M`
        });
      }
      const fd = new FormData()
      fd.append('file', file)
      fd.append('companyId', this.form.companyId)
      fd.append('batchId', this.form.batchId)
      if(this.remark)
      fd.append('remark', this.remark)
  
      declareCompanyFileUpload(fd).then(response => {
          this.openProof = false;
          this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
          this.getList();
      }).catch(()=>{});
      return true
    },
    // 文件上传成功时的钩子
    handleSuccess(files, fileList) {
      this.$notify.success({
        title: '成功',
        message: `文件上传成功`
      });
    },
    submitFileForm1() {
      this.$refs.upload1.submit()
    },

  }
};
</script>
<style scoped lang="scss">
</style>